<!DOCTYPE html>
<html>    

<head>        
    <meta charset="UTF-8">      

    <link rel="stylesheet" type="text/css" href="../css/dap.css">
</head>    

<body>      



    <div id="app">



        <div class="datepicker" :class="">
            <div class="datepicker-header">
                <button class="datepicker-prevbtn d-icon d-icon-arrow-left">
                    < </button> <label>{{ getMonthInfo(date) }}</label>
                        <!-- <button class="datepicker-nextbtn d-icon d-icon-arrow-right"> > </button> -->
            </div>

            <div class="datepicker-body">
                <table :class="" cellspacing="0">
                    <tbody>
                        <tr>
                            <th style="color:red">周日</th>
                            <th>周一</th>
                            <th>周2</th>
                            <th>周3</th>
                            <th>周4</th>
                            <th>周5</th>
                            <th>周六</th>
                        </tr>

                        <tr v-for="row in [0,1,2,3,4,5]" class="datepicker-dayrow" :class="">

                                <td v-for="column in [0,1,2,3,4,5,6]" 
                                class="{{ cells[row*7 + column].type }} ">
                                {{ cells[row * 7 + column].text }}
                            </td>
          
                
                        </tr>


                    </tbody>
                </table>
            </div>

        </div>

        <div class="datepicker" :class="">
            <div class="datepicker-header">
                <!-- <button class="datepicker-prevbtn d-icon d-icon-arrow-left"> -->
                    < </button> <label>{{ nextMonth.getFullYear() + ' - ' + (nextMonth.getMonth()+1) }}</label>
                        <button class="datepicker-nextbtn d-icon d-icon-arrow-right" @click="next" > > </button>
            </div>

            <div class="datepicker-body">
                <table :class="" cellspacing="0">
                    <tbody>
                        <tr>
                            <th style="color:red">周日</th>
                            <th>周一</th>
                            <th>周2</th>
                            <th>周3</th>
                            <th>周4</th>
                            <th>周5</th>
                            <th>周六</th>
                        </tr>

                        <tr v-for="row in 6" class="datepicker-dayrow" :class="">
                            <td v-for="column in 7" class="">
                                <!-- {{row}} - {{column}} -->

                                {{ nextCells[(row-1)*7 + column-1].text }}
                            </td>
                        </tr>


                    </tbody>
                </table>
            </div>

        </div>


    </div>



      
</body>    


<script src="../js/vue.js" type="text/javascript" charset="utf-8"> </script>    




<script src="../js/datepicker/util.js" type="text/javascript" charset="utf-8"> </script>    

<script type="text/javascript">      




    new Vue({
        el: '#app',
        data: {
            date: new Date(),
            nextMonth: getNextMonth(new Date()),
        },

        methods: {
            getMonthInfo(adate) {
                return adate.getFullYear() + " - " +  (adate.getMonth() + 1);
            },
            next() {
                // Vue.set(data, 'date', getNextMonth(date));
                // Vue.set(data, 'nextMonth', getNextMonth(nextMonth));
                console.log("next")
                this.date =  getNextMonth(this.date);
                this.nextMonth =  getNextMonth(this.nextMonth);

            },

            mkcells(date) {
                var day = getFirstDayOfMonth(date);
                var maxDay = getDayCountOfMonth(date.getFullYear(), date.getMonth());
                var lastMonthDay = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));

                day = (day === 0 ? 7 : day);

                var cells = [];
                var count = 1;
                var firstDayPosition;

                for (var i = 0; i < 6; i++) {
                    for (var j = 0; j < 7; j++) {
                        var cell = { row: i, column: j, type: 'normal' };
                        if (i === 0) {
                            if (j >= day) {
                                cell.text = count++;
                                if (count === 2) {
                                    firstDayPosition = i * 7 + j;
                                }
                            } else {
                                cell.text = lastMonthDay - (day - j % 7) + 1;
                                cell.type = 'prevmonth';
                            }
                        } else {
                            if (count <= maxDay) {
                                cell.text = count++;
                                if (count === 2) {
                                    firstDayPosition = i * 7 + j;
                                }
                            } else {
                                cell.text = count++ - maxDay;
                                cell.type = 'nextmonth';
                            }
                        }
                        cells.push(cell);
                    }
                }

                cells.firstDayPosition = firstDayPosition;

                console.log(firstDayPosition);
                console.log(cells);

                return cells;
            },
        },


        computed: {
            cells() {
                return this.mkcells(this.date);
            },
            nextCells() {
                return this.mkcells(this.nextMonth);
            },
         


        },
    })






</script>

</html>